<template>
<div class="info-box">
  <div class="left">
    <div class="avatar clickable" @mouseover="showOverlay" @mouseleave="hideOverlay">
      <img width="200px" height="200px" style="border-radius: 50%" :src="getImgURL(user.img)"  alt="">
      <span>{{user.username}}</span>
     
      <label for="file" >
        <div class="avatar-overlay" v-show="true">
          <div  class="change-avatar">点击更换头像</div>
        </div>
      </label>
      <input type="file" id="file" @change="displayImg" hidden>
    </div>
   
    <div class="publish">
      <table>
        <tr>
          <td><i class="el-icon-document"></i>我的文章</td>
          <td><i class="el-icon-chat-dot-round"></i>我的讨论</td>
          <td><i class="el-icon-star-on"></i>我的收藏</td>
        </tr>
        <tr>
          <td>{{this.myArticle.length}}</td>
          <td>{{this.myDiscuss.length}}</td>
          <td>{{this.discussCollection.length + this.articleCollection.length}}</td>
        </tr>
      </table>
    </div>
    
  </div>
  
  <div class="right">
    <!--用户基本信息-->
    <div class="information">
      <el-descriptions class="margin-top" title="基本信息" :column="3" v-loading="loading"  border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            真实姓名
          </template>
          {{ user.realName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            电话
          </template>
          {{ user.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地址
          </template>
          {{ user.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            邮箱
          </template>
          {{user.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            我的资产
          </template>
          {{user.assets + '￥'}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--collect页面-->
    <div class="collect">
      <el-tabs type="border-card">
        <el-tab-pane label="文章收藏">
          <el-table
            :data="articleCollection"
            style="width: 100%">
            <el-table-column
              prop="title"
              label="文章名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="author"
              label="作者"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
              <template slot-scope="scope">
                {{LocalTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="removeArticleCollect(scope.row.articleId)">取消收藏</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="讨论收藏">
          <el-table
            :data="discussCollection"
            style="width: 100%">
            <el-table-column
              prop="title"
              label="讨论名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="author"
              label="作者"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
              <template slot-scope="scope">
                {{LocalTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="removeDiscussCollect(scope.row.discussId)">取消收藏</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="我的文章">
          <el-table
            :data="myArticle"
            style="width: 100%">
            <el-table-column
              prop="title"
              label="文章名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="author"
              label="作者"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
              <template slot-scope="scope">
                {{LocalTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="deleteArticle(scope.row.articleId)">删除文章</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="我的讨论">
          <el-table
            :data="myDiscuss"
            style="width: 100%">
            <el-table-column
              prop="title"
              label="文章名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="author"
              label="作者"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
              <template slot-scope="scope">
                {{LocalTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="deleteDiscuss(scope.row.discussId)">删除讨论</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="我要创作" >
          <el-form label-width="40px">
            <el-form-item label="标题" prop="title" >
              <el-input style="width: 222px" v-model="form.title" placeholder="请输入文章标题"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="title">
              <el-select v-model="type">
                <el-option label="文章" value="article"></el-option>
                <el-option label="讨论" value="discuss"></el-option>
              </el-select>
            </el-form-item>
  
            <el-form-item label="分类" prop="title">
              <el-select v-model="form.type">
                <el-option v-for="item in Tyeps" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <vue-editor    v-if="type === 'article'" v-model="form.content" ></vue-editor>
          <el-button @click="publish()" style="margin-top: 20px;margin-left: 355px" type="primary">我要发表</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</div>
</template>

<script>
import axios from "axios";
import LocalTime from "@/timeZone";
import { VueEditor } from "vue2-editor";
export default {
  name: "Info",
  components: {
    VueEditor
  },
  data() {
    return {
      showOverlay: true,
      user: {},
      articleCollection: [],
      discussCollection: [],
      myArticle:[],
      myDiscuss:[],
      loading: false,
      type: 'article',
      form:{
        title: '',
        content: '学习通同款文本编辑器',
        type: '',
        author: ''
      },
      Tyeps:[]
    };
  },
  watch:{
    type(){
      this.initArticleTypes()
    }
  },
  methods: {
    publish(){
      this.form.author = this.user.realName
      axios.post('/FinancialRecommend/'+this.type+'/publish',this.form)
      .then(response => {
        this.$message.success(response.data.msg)
        this.initMyArticle()
        this.initMyDiscuss()
        this.form.content = ''
        this.form.title = ''
        this.form.type = ''
      })
    },
    //获取分类
    initArticleTypes(){
      axios.get('FinancialRecommend/'+this.type+'/type')
      .then(response => {
        this.Tyeps = response.data.data
      })
    },
    showOverlay() {
      this.showOverlay = true;
    },
    hideOverlay() {
      this.showOverlay = false;
    },
    //图片上传
    displayImg(event){
      //配置一下发送请求的参数 Content-Type: multipart/form-data
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      //获取我们传入的图片对象
      const file = event.target.files[0];
      if (!file) return;
      //发送请求
      axios.post('/FinancialRecommend/user/upload',
        //这是我们自己手动封装的一个请求参数对象
        {
          "avatar": file,
          "id":localStorage.getItem("UID"),
          "preImg": localStorage.getItem("img")
        },config)
      .then(response => {
        //重新加载用户的详细信息（因为我们上面已经修改了头像，所以必须再次查询）
        this.initUser()
        this.$message.success(response.data.msg)
      })
    },
    getImgURL(url){
      return 'http://localhost:8888/FinancialRecommend' + url
    },
    //用户的基本信息
    initUser(){
      axios.get("/FinancialRecommend/user/info?userId="+localStorage.getItem("UID"))
      .then(response => {
        this.user = response.data.data
        localStorage.setItem("UID", response.data.data.userId)
        localStorage.setItem("username", response.data.data.username)
        localStorage.setItem("assets", response.data.data.assets)
        localStorage.setItem("img", response.data.data.img)
        localStorage.setItem("user", response.data.data)
      })
    },
    initArticleCollect() {
      axios.get('/FinancialRecommend/user/article?userId='+localStorage.getItem("UID"))
      .then(response => {
        this.articleCollection = response.data.data
      })
    },
    initDiscussCollect(){
      axios.get('/FinancialRecommend/user/discuss?userId='+localStorage.getItem("UID"))
      .then(response => {
        this.discussCollection = response.data.data
      })
    },
    LocalTime(time){
      return LocalTime(time)
    },
    initMyArticle(){
      axios.get('/FinancialRecommend/article/Myarticle?userId='+localStorage.getItem("UID"))
      .then(response => {
        this.myArticle = response.data.data
      })
    },
    initMyDiscuss(){
      axios.get('/FinancialRecommend/discuss/Mydiscuss?userId='+localStorage.getItem("UID"))
        .then(response => {
          this.myDiscuss = response.data.data
        })
    },
    deleteArticle(articleId){
      this.$confirm('您确定要删除吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:"warning"
      }).then(() => {
        axios.get('/FinancialRecommend/user/deleteArticle?articleId='+articleId)
          .then(response => {
            this.$message.success(response.data.msg)
            this.initMyArticle()
          })
      }).catch(() => {
        this.$message({
          type:"info",
          message: '取消删除'
        })
      })
     
    },
    deleteDiscuss(discussId){
      this.$confirm('您确定要删除吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:"warning"
      }).then(() => {
        axios.get('/FinancialRecommend/user/deleteDiscuss?discussId='+discussId)
          .then(response => {
            this.$message.success(response.data.msg)
            this.initMyDiscuss()
          })
      }).catch(() => {
        this.$message({
          type:"info",
          message: '取消删除'
        })
      })
    },
    removeArticleCollect(articleId){
      axios.get('/FinancialRecommend/article/removeCollect?userId='+localStorage.getItem("UID")+'&articleId='+articleId)
      .then(response => {
        this.$message.success(response.data.msg)
        this.initArticleCollect()
      })
    },
    removeDiscussCollect(discussId){
      axios.get('/FinancialRecommend/discuss/removeCollect?userId='+localStorage.getItem("UID")+'&discussId='+discussId)
        .then(response => {
          this.$message.success(response.data.msg)
          this.initDiscussCollect()
        })
    }
  },
  created() {
    this.loading = true
    this.initUser()
    this.initArticleCollect()
    this.initDiscussCollect()
    this.initMyArticle()
    this.initMyDiscuss()
    this.initArticleTypes()
    setTimeout(() => {
      this.loading = false
    },500)
  },
  // Vue 的生命周期函数 存储上一次关闭前，没有提交的数据
  beforeDestroy() {
    localStorage.setItem("title",this.form.title)
    localStorage.setItem("type",this.type)
    localStorage.setItem("form.type",this.form.type)
    localStorage.setItem("content",this.form.content)
  },
  // Vue 的生命周期函数 获取上一次关闭前，没有提交的数据
  beforeMount() {
   
    let title = localStorage.getItem("title");
    let content = localStorage.getItem("content")
    let type1 = localStorage.getItem("type")
    let type2 = localStorage.getItem("form.type")
    if (title !== null){
      this.form.title = title
    }else{
      this.form.title = ''
    }
    if (content !== null){
      this.form.content = content
    }else{
      this.form.content = ''
    }
    if (type1 !== null){
      this.type = type1
    }else{
      this.type = 'article'
    }
    if (type2 !== null){
      this.form.type = type2
    }else{
      this.form.type = ''
    }
  }
  
}
</script>

<style lang="less" scoped>
.info-box{
  width: 90%;
  min-height: 80vh;
  display: flex;
  margin: 0 auto;
  padding-top: 70px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.left{
  width: 30%;
  padding: 20px;
  box-sizing: border-box;
  position: fixed;
}
.right{
  width: 70%;
}
.avatar{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto;
  text-align: center;
  background-color: pink;
  span{
    font-family: "钉钉进步体 Regular";
    font-size: 35px;
    font-weight: lighter;
  }
}
.avatar-overlay {
  position: absolute;
  top: 20px;
  left: 130px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.avatar.clickable:hover .avatar-overlay {
  opacity: 1;
  cursor: pointer;
}
.change-avatar {
  color: white;
  font-size: 16px;
}
.publish{
  width: 100%;
  height: 80px;
  margin-top:60px ;
  table{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  
}
.right{
  padding: 20px;
  margin-left: 420px;
  box-sizing: border-box;
}
.information{
  width: 100%;
  height: 200px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  //background-color: black;
}
.collect{
  width: 100%;
  margin-top: 30px;
}


</style>
